<template>
    <div class="whole">
        <div class="form">
            <div class="logo-container">
                <img class="logo-image" src="@/assets/picture/logo.ico" height="50px">
                <h1 class="logo-text">Login</h1>
            </div>
            <div class="user-container">
                <el-input v-model="usernameInput" style="width: 400px" placeholder="请输入账号" />
                <el-input v-model="passwordInput" style="width: 400px" type="password" placeholder="请输入密码" show-password />
            </div>
            <el-button @click="Login(usernameInput,passwordInput)" type="primary" round style="width: 200px;">登录</el-button>
        </div>
    </div>
</template>
<script setup lang="ts">
import {ref} from 'vue'
import axios from 'axios';
import router from '@/router/index'
const usernameInput = ref('')
const passwordInput = ref('')
async function Login(username:string,password:string) {
    try {  
    const response = await axios.post("/api/user/login", {  
      t_name: username,
      t_password: password  
    });  
    //检查响应
    if (response.data.success) {    
      console.log('登录成功', response.data.code);  
      localStorage.setItem('user_info',JSON.stringify(response.data.data))
      router.push('/')
    } 
    else {   
      throw new Error(response.data.message || '登录失败');  
    }  
  } catch (error) {   
    console.error('登录时发生错误:', error);    
    throw new Error('登录失败，请检查您的凭据或稍后重试');  
  }  
}
</script>
<style scoped lang="css">
@import "./form.css";
.form{
    width: 500px;
    display: flex;
    flex-flow: column nowrap;
    align-items: center;
    gap:10px;
}
.user-container{
    display: flex;
    flex-flow: column nowrap;
    align-items: center;
    gap:15px;
}
.el-button{
    margin-top: 20px;
}
</style>
